<template>
  <a-modal
    v-model:open="visible"
    title="导入记录"
    width="800px"
    centered
    destroy-on-close
    :footer="null"
    :body-style="{ padding: '24px 0 0' }"
    @cancel="close"
  >
    <div class="px-32 pb-24">
      <div class="flex mb-20">
        <a-select v-model:value="pageForm.state" class="w-140" :options="statusOptions" @change="getDataList({ offset: 1 })" />
      </div>
      <div class="table-wrap">
        <GTable
          :columns="tableColumns"
          :data="dataList"
          :page-form="pageForm"
          :loading="loading"
          :action-width="170"
          :scroll="{ y: 500 }"
          row-key="id"
          @getDataList="getDataList"
        >
          <template #state="{ record }">
            <div v-if="record.state === 0" class="table__status">数据准备成功</div>
            <div v-else-if="record.state === 2" class="table__status">数据准备中...</div>
            <div v-else-if="record.state === 5" class="table__status error">数据准备失败</div>
            <div v-else-if="record.state === 6" class="table__status error">数据准备超时</div>
          </template>
        </GTable>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  import useList from '@/hooks/use-list'
  import { dmpTaskApi } from '@/services/api/index'

  interface IRecord {
    id: string
    name: string
    state: string
  }

  interface PageForm {
    taskId: string
    state: string | number
    columns: 'createTime' | 'updateTime' | ''
    order: 'desc' | 'asc'
  }

  const visible = ref(false)
  const limited = ref(false)

  const statusOptions = [
    {
      label: '全部',
      value: ''
    },
    {
      label: '数据准备中',
      value: 2
    },
    {
      label: '数据准备成功',
      value: 0
    },
    {
      label: '数据准备失败',
      value: 5
    },
    {
      label: '数据准备超时',
      value: 6
    }
  ]

  const tableColumns = [
    {
      title: '上传时间',
      dataIndex: 'createTime',
      width: 200
    },

    {
      title: '上传状态',
      slot: 'state',
      dataIndex: 'state',
      width: 200
    },
    {
      title: '数据体量',
      dataIndex: 'num',
      width: 150
    },
    {
      title: '用户名',
      dataIndex: 'userName'
    }
  ]

  const { pageForm, dataList, getDataList, loading, destroy } = useList<PageForm, IRecord>(
    dmpTaskApi.importDataList,
    {
      taskId: '',
      state: '',
      columns: '',
      order: 'desc'
    },
    {
      isOpenSync: true
    }
  )

  const open = (id: string, isAuth: boolean) => {
    pageForm.value.taskId = id
    limited.value = isAuth
    getDataList()
    visible.value = true
  }

  const close = () => {
    visible.value = false
    pageForm.value.limit = 10
    destroy()
    dataList.value = []
  }

  defineExpose({
    open,
    close
  })
</script>

<style lang="less" scoped>
  .table-wrap {
    width: 100%;
  }
</style>
